import dayjs from 'dayjs'
import styles from './index.module.css'
import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import { InfiniteScroll, Switch } from 'antd-mobile'

function Index() {
    const [start] = useState('北京')
    const [end] = useState('广州')
    const [date] = useState(dayjs().format('YYYY-MM-DD'))
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const [isSpeed, setIsSpeed] = useState(false)
    const [isSeat, setIsSeat] = useState(false)
    const [isDesc, setIsDesc] = useState(false)
    const [list, setList] = useState([])
    const getList = async () => {
        const res = await http.post('/api/trip/train', {
            start,
            end,
            date,
            page
        })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            setList([...list, ...data])
            setPage((prev) => prev + 1)
        }

        if (data.length === 0) {
            setHasMore(false)
        }

    }

    useEffect(() => {
        getList()
    }, [])
    return (
        <div className={styles.box1_wroe}>
            <div>
                {
                    list?.map((item, ind) => (
                        <div key={ind} className={styles.box_wroe}>
                            <div className={styles.left_wroe}>
                                <span>{item.start}</span>
                                <span>{item.startTime}</span>
                                <span>{item.end}</span>
                                <span>商务座<b>有票</b></span>
                                <span>一等座<b>有票</b></span>
                                <span>二等座<b>有票</b></span>
                            </div>
                            <div className={styles.right_wroe}>
                                <span>￥{item.tick?.secondTick}</span>
                            </div>
                        </div>
                    ))
                }
                <InfiniteScroll loadMore={getList} hasMore={hasMore} />
            </div>
            <div className={styles.bottom_wroe}>
                <div>
                    <Switch
                        checked={isSeat}
                        onChange={(val) => {
                            setIsSeat(val)
                            setPage(1)
                            setList([])
                        }}
                    />
                    是否有票
                </div>
                <div>
                    <Switch
                        checked={isSpeed}
                        onChange={(val) => {
                            setIsSpeed(val)
                            setPage(1)
                            setList([])
                        }}
                    />
                    是否高铁
                </div>
                <div>
                    <Switch
                        checked={isDesc}
                        onChange={(val) => {
                            setIsDesc(val)
                            setPage(1)
                            setList([])
                        }}
                    />
                    升序降序
                </div>
            </div>
        </div>
    )
}

export default Index
